<template>
    <div class="body zhaopin" v-if="JSON.stringify(indexData) != '{}'">
        <!-- 轮播 -->
        <div class="j_swiper">
            <div class="swiper-container swiper1" v-if="isSwiper">
                <div class="swiper-wrapper">
                    <div
                        class="swiper-slide"
                        v-for="(item, index) in indexData.ads_list"
                        :key="index"
                    >
                        <img :src="item.content" alt="" />
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
        </div>

        <!-- 公告 -->
        <div class="j_zhao_box">
            <van-notice-bar
                :left-icon="
                    require('../../assets/newimg/jobHome/zp_img_gonggao.png')
                "
                scrollable
                speed="200"
                :text="indexData.notice_list[0].title_"
            />

            <!-- 导航 -->
            <div class="j_nav_zhao">
                <dl @click="$router.push('/jobFind')">
                    <dd>
                        <img
                            src="../../assets/newimg/jobHome/home_icon_jiuye.png"
                            alt=""
                        />
                    </dd>
                    <dt>
                        <h1>找工作</h1>
                        <h2>一键求职海量职位</h2>
                    </dt>
                </dl>
                <dl
                    style="margin-left: 0.8rem"
                    @click="$router.push('/personnelFind')"
                >
                    <dd>
                        <img
                            src="../../assets/newimg/jobHome/zp_icon_zhaorenc.png"
                            alt=""
                        />
                    </dd>
                    <dt>
                        <h1>找人才</h1>
                        <h2>最佳雇主高端揽才</h2>
                    </dt>
                </dl>
            </div>
        </div>

        <!-- 广告位 -->
        <div class="j_guangg" v-if="indexData.center_ads_list.length > 0">
            <img :src="indexData.center_ads_list[0].content" alt="" />
        </div>

        <div class="j_title">
            <span>最新职位</span><a @click="$router.push('/jobFind')">更多</a>
        </div>

        <div class="j_gxzw">
            <div v-if="indexData.recommend_jobs.jobs_list.length > 0">
                <a
                    class="j_gx_li"
                    v-for="(item, index) in indexData.recommend_jobs.jobs_list"
                    :key="index"
                    @click="
                        $router.push({
                            path: '/jobFindDetail',
                            query: { id: item.id },
                        })
                    "
                >
                    <h1>
                        <span>{{ item.jobs_name }}</span>
                        <i>{{ item.wage_cn }}</i>
                    </h1>
                    <h2>
                        {{ item.companyname
                        }}<i style="float: right">{{ item.refreshtime }}</i>
                    </h2>

                    <h3>
                        <span v-for="(li, i) in item.tag_cn" :key="i">{{
                            li
                        }}</span>
                    </h3>

                    <h4>
                        <span>
                            <img
                                src="../../assets/newimg/index/home_icon_huo@2x.png"
                                alt=""
                            />
                            <b>{{ item.contact.contact }}</b>
                        </span>
                        <i>{{ item.district_cn }}</i>
                    </h4>
                </a>
            </div>
        </div>

        <!-- 查看更多 -->
        <div class="jz-loods get_more" @click="$router.push('/jobFind')">
            <span>查看更多</span>
        </div>
        <div class="zhanwei"></div>
    </div>
</template>

<script>
import Swiper, { Autoplay, Pagination } from 'swiper';
Swiper.use([Autoplay, Pagination]);
import 'swiper/swiper-bundle.min.css';
import 'swiper/swiper.less';
import { axiosPost } from '../../axios';
import { Toast } from 'vant';
export default {
    name: '',
    data() {
        return {
            isSwiper: false,
            indexData: {},
        };
    },
    computed: {},
    mounted() {
        this.getJobHome();
    },
    methods: {
        // 初始化轮播
        initSeiper() {
            new Swiper('.swiper1', {
                pagination: {
                    el: '.swiper-pagination',
                },
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
                loop: true,
                on: {
                    navigationShow: function () {
                        // console.log('按钮显示了');
                    },
                },
            });
        },
        getJobHome() {
            axiosPost('/apis/index/index', {}, (res) => {
                // console.log(res);
                if (res.status != 1) {
                    return Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                }
                this.indexData = res.data;
                this.isSwiper = true;
                this.$nextTick(() => {
                    this.initSeiper();
                });
            });
        },
    },
};
</script>

<style lang="less" scope>
.zhaopin {
    .j_swiper {
        height: 6.4rem;
        width: 15.1467rem;
        margin: 0 auto;
        border-radius: 0.4267rem;
        overflow: hidden;

        .swiper-pagination {
            .swiper-pagination-bullet-active {
                width: 0.3413rem;
                background: #ff3b3b;
            }
        }

        .swiper-pagination-bullet {
            width: 0.1707rem;
            height: 0.1707rem;
            display: inline-block;
            border-radius: 0.0853rem;
            background: #e1dfe0;
            opacity: 1;
        }

        .swiper-container {
            height: 100%;
        }

        .swiper-wrapper {
            height: 100%;
        }

        .swiper-slide {
            width: 15.1467rem;
            height: 6.4rem;
            border-radius: 0.4267rem;
            overflow: hidden;

            img {
                width: 100%;
                height: 6.4rem;
            }
        }
    }
    // 广告
    .j_guangg {
        width: 15.1467rem;
        margin: 0 auto;
        border-radius: 0.4267rem;
        img {
            width: 100%;
        }
    }

    .j_zhao_box {
        width: 15.1467rem;
        height: 4.8427rem;
        margin: 0.4267rem auto 0.704rem;
        background: #fff;
        border-radius: 0.4267rem;
        padding: 0.64rem;
    }

    // 公告
    .van-notice-bar {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        font-size: 0.512rem;
        line-height: 1.0667rem;
        background-color: #fff1f1;
        border-radius: 0.4267rem;
        height: 1.0667rem;
        overflow: hidden;
        padding: 0;
        color: #ff343d;

        .van-icon__image {
            width: 2.0693rem;
            height: 1.0667rem;
            object-fit: contain;
        }
    }

    // 导航
    .j_nav_zhao {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 0.5333rem;

        dl {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            dd {
                width: 2.0053rem;
                height: 2.0053rem;
                border-radius: 50%;
                img {
                    width: 2.0053rem;
                }
            }

            dt {
                margin-left: 0.3413rem;

                h1 {
                    font-size: 0.64rem;
                    font-weight: 600;
                    color: #000000;
                }
                h2 {
                    font-size: 0.512rem;
                    font-weight: 400;
                    color: #999999;
                    margin-top: 0.4053rem;
                }
            }
        }
    }
}
</style>
